/** @type {import('tailwindcss').Config} */
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './src/**/**/*.{html,js,jsx,ts,tsx}',
    './app/**/**/*.{html,js,jsx,ts,tsx}',
    './layouts/*.{html,js,jsx,ts,tsx}',
    './screens/**/**/*.{html,js,jsx,ts,tsx}',
    './components/**/**/*.{html,js,jsx,ts,tsx}',
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: {
          0: 'var(--color-primary-0)',
          50: 'var(--color-primary-50)',
          100: 'var(--color-primary-100)',
          200: 'var(--color-primary-200)',
          300: 'var(--color-primary-300)',
          400: 'var(--color-primary-400)',
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
          700: 'var(--color-primary-700)',
          800: 'var(--color-primary-800)',
          900: 'var(--color-primary-900)',
          950: 'var(--color-primary-950)',
        },
        secondary: {
          0: 'var(--color-secondary-0)',
          50: 'var(--color-secondary-50)',
          100: 'var(--color-secondary-100)',
          200: 'var(--color-secondary-200)',
          300: 'var(--color-secondary-300)',
          400: 'var(--color-secondary-400)',
          500: 'var(--color-secondary-500)',
          600: 'var(--color-secondary-600)',
          700: 'var(--color-secondary-700)',
          800: 'var(--color-secondary-800)',
          900: 'var(--color-secondary-900)',
          950: 'var(--color-secondary-950)',
        },
        tertiary: {
          50: 'var(--color-tertiary-50)',
          100: 'var(--color-tertiary-100)',
          200: 'var(--color-tertiary-200)',
          300: 'var(--color-tertiary-300)',
          400: 'var(--color-tertiary-400)',
          500: 'var(--color-tertiary-500)',
          600: 'var(--color-tertiary-600)',
          700: 'var(--color-tertiary-700)',
          800: 'var(--color-tertiary-800)',
          900: 'var(--color-tertiary-900)',
          950: 'var(--color-tertiary-950)',
        },
        error: {
          0: 'var(--color-error-0)',
          50: 'var(--color-error-50)',
          100: 'var(--color-error-100)',
          200: 'var(--color-error-200)',
          300: 'var(--color-error-300)',
          400: 'var(--color-error-400)',
          500: 'var(--color-error-500)',
          600: 'var(--color-error-600)',
          700: 'var(--color-error-700)',
          800: 'var(--color-error-800)',
          900: 'var(--color-error-900)',
          950: 'var(--color-error-950)',
        },
        success: {
          0: 'var(--color-success-0)',
          50: 'var(--color-success-50)',
          100: 'var(--color-success-100)',
          200: 'var(--color-success-200)',
          300: 'var(--color-success-300)',
          400: 'var(--color-success-400)',
          500: 'var(--color-success-500)',
          600: 'var(--color-success-600)',
          700: 'var(--color-success-700)',
          800: 'var(--color-success-800)',
          900: 'var(--color-success-900)',
          950: 'var(--color-success-950)',
        },
        warning: {
          0: 'var(--color-warning-0)',
          50: 'var(--color-warning-50)',
          100: 'var(--color-warning-100)',
          200: 'var(--color-warning-200)',
          300: 'var(--color-warning-300)',
          400: 'var(--color-warning-400)',
          500: 'var(--color-warning-500)',
          600: 'var(--color-warning-600)',
          700: 'var(--color-warning-700)',
          800: 'var(--color-warning-800)',
          900: 'var(--color-warning-900)',
          950: 'var(--color-warning-950)',
        },
        info: {
          0: 'var(--color-info-0)',
          50: 'var(--color-info-50)',
          100: 'var(--color-info-100)',
          200: 'var(--color-info-200)',
          300: 'var(--color-info-300)',
          400: 'var(--color-info-400)',
          500: 'var(--color-info-500)',
          600: 'var(--color-info-600)',
          700: 'var(--color-info-700)',
          800: 'var(--color-info-800)',
          900: 'var(--color-info-900)',
          950: 'var(--color-info-950)',
        },
        typography: {
          0: 'var(--color-typography-0)',
          50: 'var(--color-typography-50)',
          100: 'var(--color-typography-100)',
          200: 'var(--color-typography-200)',
          300: 'var(--color-typography-300)',
          400: 'var(--color-typography-400)',
          500: 'var(--color-typography-500)',
          600: 'var(--color-typography-600)',
          700: 'var(--color-typography-700)',
          800: 'var(--color-typography-800)',
          900: 'var(--color-typography-900)',
          950: 'var(--color-typography-950)',
        },
        outline: {
          0: 'var(--color-outline-0)',
          50: 'var(--color-outline-50)',
          100: 'var(--color-outline-100)',
          200: 'var(--color-outline-200)',
          300: 'var(--color-outline-300)',
          400: 'var(--color-outline-400)',
          500: 'var(--color-outline-500)',
          600: 'var(--color-outline-600)',
          700: 'var(--color-outline-700)',
          800: 'var(--color-outline-800)',
          900: 'var(--color-outline-900)',
          950: 'var(--color-outline-950)',
        },
        background: {
          0: 'var(--color-background-0)',
          50: 'var(--color-background-50)',
          100: 'var(--color-background-100)',
          200: 'var(--color-background-200)',
          300: 'var(--color-background-300)',
          400: 'var(--color-background-400)',
          500: 'var(--color-background-500)',
          600: 'var(--color-background-600)',
          700: 'var(--color-background-700)',
          800: 'var(--color-background-800)',
          900: 'var(--color-background-900)',
          950: 'var(--color-background-950)',
          error: 'var(--color-background-error)',
          warning: 'var(--color-background-warning)',
          muted: 'var(--color-background-muted)',
          success: 'var(--color-background-success)',
        },
      },
      spacing: {
        'px': '1px',
        '0': 0,
        '0.5': 2,
        '1': 4,
        '1.5': 6,
        '2': 8,
        '2.5': 10,
        '3': 12,
        '3.5': 14,
        '4': 16,
        '4.5': 18,
        '5': 20,
        '6': 24,
        '7': 28,
        '8': 32,
        '9': 36,
        '10': 40,
        '11': 44,
        '12': 48,
        '16': 64,
        '20': 80,
        '24': 96,
        '32': 128,
        '35': 140,
        '40': 160,
        '48': 192,
        '56': 224,
        '64': 256,
        '72': 288,
        '80': 320,
        '96': 384,
        '1/2': '50%',
        '1/3': '33.333%',
        '2/3': '66.666%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666%',
        '2/6': '33.333%',
        '3/6': '50%',
        '4/6': '66.666%',
        '5/6': '83.333%',
        'full': '100%',

        '25/2': '12%',
        '100/7': '14%',
        '6/25': '24%',
        '3/10': '30%',
        '9/20': '45%',
        '12/25': '48%',
        '7/10': '70%',

        '60': 60,
        '74': 74,
        '70': 70,
        '90': 90,
        '122': 122,
        '141': 141,
        '170': 170,
        '182': 182,
        '200': 200,
        '212': 212, //layoutPadding
        '234': 234, //qrBoxInner
        '275': 275,
        '354': 354,
        '384': 384,
        '372': 372, //imgWidth
        '422': 422,
        '441': 441,
        '480': 480,
        '508': 508, //boxSize
        '544': 544,
        'authcard': 544,
        '622': 622,
        '736': 736,
        '764': 764,
        'containerWidth': 1016,
      },
      fontFamily: {
        heading: undefined,
        body: undefined,
        mono: undefined,
      },
      outlineWidth: {
        20: 20,
        50: 50,
      },
      fontWeight: {
        hairline: '100',
        extraBlack: '950',
      },
      fontSize: {
        '2xs': '10px',
      },
    },
    plugins: [],
  },
};